import React from "react"
import { useTranslation } from 'react-i18next'
import { namespaces } from "./i18n/i18n.constants"
import { Menu, Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { languages } from "./i18n/i18n.constants"
import 'antd/dist/antd.css'

const menu = () => {
  return (
    <Menu>
      {
        Object.keys(languages).map(item => {
          return (
            <Menu.Item key={item}>
              {`${item}`}
            </Menu.Item>
          )
        })
      }
    </Menu>
  )
}

export const App = () => {
  const { t, i18n } = useTranslation(namespaces.pages.hello) // 指定一个命名空间
  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language)
  }
  return (
    <>
      <h1>{t('welcome')}</h1>
      <button>{t("buttons.ok", { ns: namespaces.common })}</button>
      <button onClick={changeLanguage.bind(null, 'en')}>English</button>
      <button onClick={changeLanguage.bind(null, 'cn')}>China</button>
      <button onClick={changeLanguage.bind(null, 'es')}>Espanol</button>
      <Dropdown
        overlay={menu}
        trigger={['click']}
      >
        <a onClick={e => e.preventDefault()}>
          Click me <DownOutlined />
        </a>
      </Dropdown>
    </>
  )
}